<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- Dom内容 -->
    <div class="tit-1">
      <span class="tit-1-left" @click="toMy()">
        <i class="iconfont icon-lt"></i><span class="baby">通讯录</span></span
      >
    </div>
    <div class="con">
      <div class="nav">
        <span @click="nav(0)" :class="nowIndex === 0 ? 'active' : ''"
          >推荐</span
        >
        <span @click="nav(1)" :class="nowIndex === 1 ? 'active' : ''"
          >好友用户</span
        >
      </div>
      <div v-if="nowIndex === 0">
        <div :class="item.userType=='1'?'content reds':'content'" v-for="(item, index) in datalist" :key="index">
          <img :src="item.userImg" />
          <a>{{ item.userName }}</a>
          <button v-show="item.flag == 0" @click="add(item)">未添加</button>
          <button v-show="item.flag == 1" @click="add(item)" class="select">
            已添加
          </button>
        </div>
      </div>
      <div v-if="nowIndex == 1">
        <div :class="item.buyType=='1'?'content reds':'content'" v-for="(item, index) in attention" :key="index">
          <img :src="item.buyImg"/>
          <a>{{ item.friendlyName }}</a>
          <button @click="appt(item)" class="select">
            取关
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import a from './a'; // 引入组件
import * as apis from "../../api/home";
export default {
  name: "",

  data() {
    return {
      msg: "测试",
      nowIndex: 1,
      datalist: [],
      attention: [],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素)
  mounted() {
    //好友列表
    // console.log(this.$store.state.order.user.title)
    apis
      .frienddataData({ content: this.$store.state.order.user.title })
      .then((Request) => {
        console.log(Request.data.code)
        this.attention = Request.data.code;
      });
      apis.typuzmianys().then((response) => {
        console.log(response);
      });
    this.attention.forEach((item, index) => {
      apis.typuzmiany({ id: item.friend }).then((response) => {
        console.log(response);
      });
    });

  },
  // Vue方法定义
  methods: {
    nav(index) {
      this.nowIndex = index;
      //添加到好友列表
      apis
        .frienddataData({ content: this.$store.state.order.user.title })
        .then((Request) => {
          this.attention = Request.data.code;
        });
      apis.typuzmianys().then((response) => {
      });
      this.attention.forEach((item, index) => {
      apis.typuzmiany({ id: item.friend }).then((response) => {
      });
    });
    apis.userData().then((Request) => {
      console.log(Request.data.code);
      let listData = Request.data.code.filter((item) => {
        console.log(item.phone);
        return !(this.$store.state.order.user.title === item.phone);
      });
      console.log(listData);
      this.datalist = listData;
    });
    },
    add(obj) {
      //切换  falg 0 1  已添加 和 未添加
      console.log(obj)
      if (obj.flag == 0) {
        apis.addition({ Id: obj.userId, num: 1 }).then((Request) => {});
      } else {
        apis.addition({ Id: obj.userId, num: 0 }).then((Request) => {});
      }
      //添加好友
      if (obj.flag == 0) {
        apis
          .addsbfriends({
            mys: this.$store.state.order.user.title,
            fid: obj.userId,
            name: obj.userName,
            buyImg:obj.userImg,
            buyType:obj.userType
          })
          .then((Request) => {});
      }
      //删除好友
      if (obj.flag == 1) {
        apis.expurgateFrie({ deleFrin: obj.userId }).then((Request) => {});
      }
      //点击刷新
      apis.userData().then((Request) => {
        console.log(Request.data.code);
        let listData = Request.data.code.filter((item) => {
          console.log(item.phone);
          return !(this.$store.state.order.user.title === item.phone);
        });
        console.log(listData);
        this.datalist = listData;
      });
    },
    toMy() {
      this.$router.push("/my");
    },
      appt(obj){
        apis.expurgateFrie({ deleFrin: obj.friend }).then((Request) => {});
          apis
        .frienddataData({ content: this.$store.state.order.user.title })
        .then((Request) => {
          console.log(Request.data.code);
          this.attention = Request.data.code;
        });
    }
  },
};
</script>
<style scoped>
@import url("../../../assets/font/iconfont.css");
/* @import url(''); 引入css类 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.box {
  background: #f4f4f4;
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 100000;
  overflow: auto;
}

.tit-1 {
  width: 100vw;
  height: 64px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 64px;
  background: white;
}
.tit-1-left {
  margin-left: 16px;
  font-weight: 600;
  color: rgb(195, 195, 195);
  text-align: center;
}
.reds{
  color: red;
    font-size: 20px;
  font-weight: 600;
    font-family: STFangsong;
    font-weight:700 ;

}
.con-low p {
  margin: 3px 0;
}
.con {
  width: 100px;
  height: calc(100vh - 66px);
}
.con .nav {
  width: 100vw;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  border-top:1px #ccc solid;
  background: white;
  margin-bottom: 10px;
  color: #ccc;
  line-height: 50px;
}
.con .nav .active {
  color: black;
  border-bottom: 5px solid #fa9202;
  border-radius: 4px;
  margin-bottom: 5px;
}
.con .content {
  width: 100vw;
  padding: 10px 20px;
  border-bottom: solid 1px rgb(219, 219, 219);
  vertical-align: middle;
  background: white;
}
.con .content:last-child {
  border-bottom: none;
}
.con .content img {
  width: 45px;
  border-radius: 50%;
  height: 45px;
  vertical-align: middle;
  margin-right: 10px;
}
.con .content a{
  font-size: 17px;
}
.con .content button {
  float: right;
  border:2px solid #ccc;
  padding: 5px 10px;
  border-radius: 10px;
  margin-top: 10px;
  background: none;
  color: rgb(117, 117, 117);
}
.con .content .select {
  background: none;
  border:2px solid #ec8e22;
  color: #eba21b;

}
.baby {
  font-size: 18px;
  color: black;
  margin-left: 17px;
}
</style>